<!DOCTYPE html>
<html lang="en"
      xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" th:href="@{/layuiadmin/layui/css/layui.css}" media="all">
    <link rel="stylesheet" th:href="@{/css/ray-ui.css}">
</head>
<body>

<div class="layui-fluid" style="padding: 10px;">

    <div class="layui-card">
        <div class="layui-form layui-card-header" style="padding: 10px;">
            <div class="layui-form-item search" >
                <span>模糊搜索： </span>
                <div class="layui-inline">
                    <input class="layui-input" id="keyword" autocomplete="off" placeholder="请输入表名">
                </div>
                <button class="layui-btn layui-btn-normal" data-type="reload">搜索</button>
            </div>
        </div>

        <div class="layui-card-body">
            <div class="layui-row">
                <!--lay-filter稍后用于绑定相应事件使用-->
                <table id="table" lay-filter="test"></table>

                <blockquote class="layui-elem-quote">
                    <h2>工作清单：</h2>
                    <ul>
                        <li>1. 模块整合 2018-12-20 09:38:11</li>
                    </ul>
                </blockquote>
            </div>
        </div>
    </div>
</div>

<!--用于下面绑定表格行加上操作按钮-->
<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-xs" lay-event="gen"><i class="layui-icon">&#xe628;</i>生成代码</a>
</script>
<script th:src="@{/js/ray-ui.js}"></script>
<script th:src="@{/layuiadmin/layui/layui.js}"></script>
<script th:inline="none">
    layui.use('table', function () {
        var table = layui.table;

        // table.render()方法返回一个对象：var tableIns = table.render(options)，可用于对当前表格进行“重载”等操作
        table.render({
            skin: 'line' //行边框风格
            // ,even: true //开启隔行背景
            // ,size: 'sm' //小尺寸的表格
            , elem: '#table'
            , url: '/system/sysGenerator/list'
            , title: '生成代码'
            , toolbar: "#toolbarDemo"
            , page: true
            , limits: [10, 20, 50, 100]
            , id: 'tableDate'
            , cellMinWidth: 60
            , cols: [[
                {field: 'tableName', title: '表名'}
                , {field: 'tableComment', title: '备注'}
                , {field: 'createTime', title: '创建时间', sort: true}
                , {fixed: 'right', title: '操作', align:'center', toolbar: '#barDemo'}
            ]]
        });

        // 搜索功能
        var $ = layui.$, active = {
            reload: function () {
                var keyword = $('#keyword');
                table.reload('tableDate', {
                    //从第 1 页开始
                    page: {
                        curr: 1
                    }
                    //设定异步数据接口的额外参数
                    , where: {
                        keyword: keyword.val()
                    }
                });
            }
        };

        // 点击搜索
        $('.search .layui-btn').on('click', function () {
            var type = $(this).data('type');
            active[type] ? active[type].call(this) : '';
        });

        // 监听行工具事件
        // 绑定查删改事件test对于table中的lay-filter的值
        table.on('tool(test)', function (obj) {
            var data = obj.data;
            if (obj.event == 'gen') {
                layer.confirm('确定生成代码么?',{
                    skin: 'layui-layer-my'
                }, function (index) {
                    gen(data.tableName);
                    layer.close(index);
                });
            }
        });

        // 生成代码
        function gen(tableName) {
            location.href = "/system/sysGenerator/code?tables=" + tableName;
        };
    });

</script>
</body>
</html>